<div class="card-dialog max-w-xl mx-auto py-10 px-4">
  <h2 class="text-xl lg:text-2xl font-medium mb-4"><%= Spree.t(:change_password) %></h2>
  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
    <%= render "spree/shared/error_messages", target: resource %>
    <%= f.hidden_field :reset_password_token %>
    <div class="flex flex-col mb-4">
      <%= f.label :password, Spree.t(:password) %>
      <% if @minimum_password_length %>
        <em><%= Spree.t(:minimum_password_length, count: @minimum_password_length) %></em>
      <% end %>
      <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: 'text-input', required: true %>
    </div>
    <div class="flex flex-col mb-4">
      <%= f.label :password_confirmation, Spree.t(:confirm_password) %>
      <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'text-input', required: true %>
    </div>
    <div class="actions">
      <%= f.submit Spree.t(:reset_password), class: 'btn btn-primary' %>
    </div>
  <% end %>
  <%= render "devise/shared/links" %>
</div>
